<template>
    <div class="login-page" @keyup.enter="login">
        <div class="login-page-box">
            <div class="login-page-box-name-d">Username:</div>
            <input class="login-page-box-name" v-model="username">
            <div class="login-page-box-password-d">Password:</div>
            <input class="login-page-box-password" type="password" v-model="password">
            <div class="login-page-box-btns">
                <div class="login-page-box-log" @click="login">Login</div>
                <div class="login-page-box-forget">Forget Password?</div>
            </div>
        </div>
    </div>
</template>

<script>
import { LOGIN } from './api'

export default {
    data: function() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        login: function() {
            LOGIN(this.username, this.password).then(response => {
                if (response.data) {
                    this.$store.commit('UPDATE_AUTH', {
                        username: response.data.split('|')[0],
                        authToken: response.data
                    })
                    this.$router.replace('manage')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.login-page-box {
    width: 288px;
    box-shadow: 0 0 10px 0 #999;
    border-radius: 5px;
    padding: 20px;
    &-name-d,
    &-password-d {
        margin: 5px;
    }
    &-name,
    &-password {
        width: 100%;
    }
    &-btns {
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    &-log {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #18d;
        width: 100px;
        height: 30px;
        margin: 8px;
        border-radius: 5px;
        color: #eee;
        &:hover {
            box-shadow: 0 0 2px 0 #999;
        }
    }
    &-forget {
        color: #347;
        font-size: 13px;
    }
}
</style>